<template>
<div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
        <div class="inputs">
            <!-- <input placeholder="请输入手机号" class="input">
            <input placeholder="密码" class="input" type="password"> -->
            <!-- 
                error: 字体红色样式
                label: 设置输入框左边的标题
                required：表示必填项

                ref: 作用一，获取标签
                      作用二，获取组件
             -->
            <van-form ref="form">
              <van-field v-model="user.username" 
              placeholder="请输入手机号码" 
              :rules="[{required: true,pattern: /^1[3,4,5,6,7,8,9]\d{9}$/, message: '请输入正确的手机号码'}]" />
              <van-field placeholder="请输入昵称" 
              v-model="user.nickname"
              :rules="[{required: true, message: '昵称不能为空'}]"></van-field>
              <van-field v-model="user.password"
               type="password" placeholder="请输入密码" 
               :rules="[{required: true, message: '密码不能为空'}]" />
            </van-form>
        </div>
        <p class="tips">
            有账号？
            <a href="#/login" class="">去登录</a>
        </p>
        <!-- <div class="button">登录按钮</div> -->
        <van-button type="primary" round block @click="registerFn" >注册</van-button>
    </div>
</div>
</template>

<script>
import { register } from "@/api/user.js"
export default {
    data(){
        return {
            // 如果接口需要传递多个参数的时候，我们一般把他们放到同一个对象中
            // 为什么呢？答：原因一：调用接口的时候方便传参数
            user: {
                username: "13234565678",
                password: "",
                nickname: ""
            }
        }
    },
    methods: {
        // 注册
        registerFn(){
            // 添加校验,校验通过调用接口实现注册功能
            this.$refs.form.validate().then(()=>{
                console.log("校验通过");
                register(this.user).then(res=>{
                    // console.log(57,res);
                    if(res.data.message == "注册成功"){
                        // 跳转到登录页面
                        this.$router.push({
                            path: "/login"
                        })
                    }else{
                        this.$toast.fail(res.data.message)
                    }
                })
            }).catch(()=>{
                console.log("校验失败");
            })
        }
    }
}
</script>

<style lang="less" scoped>
// vant组件库中的组件名即为当前组件的类名
// 样式穿透，表示使用了样式穿透，我们就可以直接设置组件内部的标签样式
// /deep/ 样式穿透是less预处理器提供的语法
// 注意：样式穿透针对局部样式，也就是style标签上必须写上scoped属性样式穿透才生效。
/deep/.van-field{
    border-bottom: 1px solid green;
    margin-bottom: 10px;
    input{
        color: green;
    }
}
.container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>